<template>
  <div>
    <!-- 标题 -->
    <el-row>
      <el-col :span="2">
        <div id="title">
          <i class="el-icon-house"></i>
          <b>动态评论</b>
        </div>
      </el-col>
      <!-- 搜索内容 -->
      <el-col :span="15">
        <el-col :span="20">
          <el-input v-model="inputName"
                    placeholder="搜索内容"
                    @keyup.enter.native="search(inputName)">
          </el-input>
        </el-col>
        <el-col :span="3">
          <!-- 批量删除 -->
          <el-button type="primary"
                     @click="search(inputName)">搜索
          </el-button>
        </el-col>
      </el-col>

      <el-col :span="6">
        <!-- 批量删除 -->
        <el-button type="danger"
                   @click="delectAll(handleSelectionChange)">批量删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格主体 -->
    <el-table :data="tableData"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="头像"
                       align="center"
                       width="100"
                       prop="user.image">
        <template slot-scope="td">
          <img :src="td.row.user.image"
               style="width:80px;height:80px;" />
        </template>
      </el-table-column>
      <el-table-column label="昵称"
                       align="center"
                       width="100"
                       prop="user.account"></el-table-column>
      <el-table-column label="评论内容"
                       align="center"
                       width="300"
                       prop="content"></el-table-column>
      <el-table-column label="评论时间"
                       align="center"
                       prop="time"
                       width="200">
      </el-table-column>
      <!--评论状态-->
      <el-table-column label="评论状态状态"
                       align="center"
                       width="100">
        <template slot-scope="td">
          <!-- 已下单 -->
          <el-tag type="danger"
                  v-if="[1].includes(td.row.status)">已删除</el-tag>
          <!-- 已付款 -->
          <el-tag type="success"
                  v-if="[0].includes(td.row.status)">未删除</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作"
                       align="center"
                       width="200">
        <template slot-scope="td">
          <!-- 删除 -->
          <el-popconfirm title="您确定要删除该评论吗"
                         v-if="[0].includes(td.row.status)"
                         @confirm="deletesingle(td.$index,td.row)">
            <el-button slot="reference">删除</el-button>
          </el-popconfirm>
          <!-- 恢复 -->
          <el-popconfirm title="您确定要恢复该评论吗"
                         v-if="[1].includes(td.row.status)"
                         @confirm="restoresingle(td.$index,td.row)">
            <el-button slot="reference">恢复</el-button>
          </el-popconfirm>
          <el-button type="success"
                     @click="detail(td.row)">查看详情</el-button>
        </template>

      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="currentsize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!-- 查看详情：对话框 -->
    <el-dialog title="查看详情"
               :visible.sync="detailVisible">
      <commentdetail :detail="currentComment"
                     v-if="refresh"></commentdetail>

    </el-dialog>

  </div>
</template>

<script>

//导入axios
import axios from '../../../../axios_config'
import Commons from '../../../../js/commons'

import commentdetail from './commentdetail'

export default {

  data () {
    return {
      detailVisible: false,//查看详情
      refresh: true,//强制刷新子组件
      tableData: [],//表格数据

      currentComment: {}, //选中行数据
      currentPage: 1,          //当前页
      total: 0,                //总条数
      totalPage: 0,            //总页数
      currentsize: 5,              //每一页大小
      multipleSelection: [],   //每一行数据的选择框

      inputName: "",           //搜索栏内容
    }
  },
  methods: {

    //发送请求后去返回数据
    findByPage () {
      console.log(this.currentsize);
      axios.get("http://192.168.11.18:8080/recentcomment/findAll?content=" + this.inputName + "&current=" + this.currentPage + "&size=" + this.currentsize)
        .then(res => {
          this.tableData = [];
          this.tableData = res.data.data.data;

          console.log(res.data.data);
          console.log(this.tableData);
          //分页数据
          this.total = res.data.data.total;
          this.totalPage = res.data.data.totalPage;
          this.currentPage = res.data.data.currentPage;
          //this.size = res.data.data.pageSize;

        });
    },
    //修改每一页大小
    handleSizeChange (currentsize) {
      console.log(currentsize);
      this.currentsize = currentsize;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },

    //选择第几页
    handleCurrentChange (page) {
      console.log("选择:" + page + "页");
      this.currentPage = page;
      //发送请求获取当前页数据    page    size
      this.findByPage();
    },
    //批量删除
    delectAll () {
      this.$confirm('您确定要删除选中记录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.multipleSelection.length != 0) {
          //后台删除  
          for (let j = 0; j < this.multipleSelection.length; j++) {
            //数据库中的真正的活动id
            let id = this.multipleSelection[j].id;
            //发送请求将status改为1
            axios.get("http://192.168.11.18:8080/recentcomment/deletecomment?id=" + id)
              .then(res => {
                console.log(res.data);
              })
          }

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          //前端删除
          for (let i = 0; i < this.tableData.length; i++) {
            const element = this.tableData[i];
            element.id = i
          }
          this.multipleSelection.forEach(element => {
            this.tableData.forEach((e, i) => {
              if (element.id == e.id) {
                this.tableData.splice(i, 1)
              }
            });
          });
        } else {
          this.$message.error('请先至少选择一项');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //多选框将选中数据赋给全局变量
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },

    // 是否可选
    canSelect (row) {
      if (row.result == '未处理') {
        return true;
      } else {
        return false;
      }
    },
    //单挑数据删除
    deletesingle (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      console.log("删除单条数据");
      console.log(this.tableData[row].id);
      //发送请求将status改为1
      axios.get("http://192.168.11.18:8080/recentcomment/deletecomment?id=" + this.tableData[row].id)
        .then(res => {
          console.log(res.data);
        })
      //修改前端数据
      this.tableData[row].status = 1;
    },
    //恢复
    restoresingle (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      console.log("恢复数据");
      console.log(this.tableData[row].id);
      //发送请求将status改为1
      axios.get("http://192.168.11.18:8080/recentcomment/restorecomment?id=" + this.tableData[row].id)
        .then(res => {
          console.log(res.data);
        })
      //修改前端数据
      this.tableData[row].status = 0;
    },
    //查看详情
    detail (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      this.currentComment = row;
      this.detailVisible = true;
      console.log(row);
    },
    //搜索
    search (content) {
      console.log(this.currentPage);
      console.log(typeof (this.currentPage));
      this.inputName = content;
      this.findByPage();
      //   axios.get("http://192.168.11.18:8080/recentcomment/findByLike?content=" + content + "&current=" + this.currentPage + "&size=" + this.size)
      //     .then(res => {
      //       this.tableData = res.data.data.data;

      //       console.log(res.data.data);
      //       //分页数据
      //       this.total = res.data.data.total;
      //       this.totalPage = res.data.data.totalPage;
      //       this.currentPage = res.data.data.currentPage;
      //       this.size = res.data.data.pageSize;
      //     });
    }
  },
  //加载完毕执行
  mounted () {
    //调用方法获取第一页数据
    this.findByPage();
  },
  //组件注册
  components: {
    commentdetail
  }

}
</script>

<style scoped>
</style>